* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  position: relative;
  width: 100%;
  height: 100vh;
}

.playground{
  position: relative;
  width: 100%;
  height: 200vh;
  background-color: lightblue;
  display: inline-block;
}

.animation-container{
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  background-color: #000;
  margin-top: 30%;
  width: 100%;
  height: 100vh;
}

.list{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 100px);
  grid-template-rows: repeat(2, 200px);
  /* 子元素在容器空间中的对齐 */
  /* justify-content: center; */
  /* align-content: center; */
  /* 子元素在容器空间中的对齐 替代方式*/
  place-content:center;
  /* 子元素内的对齐方式 */
  /* justify-items: center; */
  /* align-items: center; */
  /* 子元素内的对其方式 替代方式 */
  place-items: center;
  overflow: hidden;
}

.list-item{
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #000;
  text-align: center;
  border-radius: 5px;
  background-color: lightblue;
}
.list-item:nth-child(3n-1){
  background-color: lightgreen;
}
.list-item:nth-child(3n){
  background-color: lightyellow;
}

.header,.footer{
  width: 100%;
  height: 100vh;
  background-color: #fff;
  color: #000;
  font-size: 30px;
  font-weight: bold;
  line-height: 100vh;
  text-align: center;
  overflow: hidden;
}